<template>
  <div class="full" id="Echart" ref="Echart">
    <div class="w_full h_25 lh_20 cursor ls_2 chart_title fw_bold" @click="goToPath(path)">
      {{ title }}
    </div>

    <div class="w_full h_full-25">
      <bing-tu v-if="chartType == '饼图'" :isShowUnit="isShowUnit" :value="chartData"
        @emitChartParams="emitChartParams" />
      <huan-zhuang-tu v-if="chartType == '环状图'" :isShowUnit="isShowUnit" :value="chartData"
        @emitChartParams="emitChartParams" />
      <zhu-zhuang-tu v-if="chartType == '柱状图'" :value="chartData" :isShowUnit="isShowUnit"
        @emitChartParams="emitChartParams" />
      <xian-xing-tu v-if="chartType == '线型图'" :isShowUnit="isShowUnit" :value="chartData"
        @emitChartParams="emitChartParams" />
      <zhu-zhuang-tu-x v-if="chartType == '柱状图3'" :value="chartData" :isShowUnit="isShowUnit"
        @emitChartParams="emitChartParams" />
      <shuang-zhu-tu v-if="chartType == '双柱图'" :value="chartData" :isShowUnit="isShowUnit"
        @emitChartParams="emitChartParams" />
      <huan-zhuang-tu-3d v-if="chartType == '3d-pie'" :value="chartData" :isShowUnit="isShowUnit" />
      <zhu-zhuang-tu-3d v-if="chartType == '3d-bar'" />
    </div>
  </div>
</template>

<script setup lang="js">
import { ref, reactive, watch, onMounted, watchEffect } from 'vue'
import { useRouter } from 'vue-router';

import BingTu from '../../common/charts/bing-tu.vue';
import HuanZhuangTu from '../../common/charts/huan-zhuang-tu.vue';
import ZhuZhuangTu from '../../common/charts/zhu-zhuang-tu.vue';
import ZhuZhuangTuX from '../../common/charts/zhu-zhuang-tu-x.vue';
import XianXingTu from '../../common/charts/xian-xing-tu.vue';
import ShuangZhuTu from '../../common/charts/shuang-zhu-tu.vue';

// --------- 3d 图表 ---------
import HuanZhuangTu3d from '../../common/charts/huan-zhuang-tu-3d.vue';
import ZhuZhuangTu3d from '../../common/charts/zhu-zhuang-tu-3d.vue';

const props = defineProps({
  title: '',
  path: '',
  bgi: 'default',
  chartType: '',
  chartData: Object,
  isShowUnit: true,
})

const emit = defineEmits(['emitChartParams'])

const router = useRouter()

function goToPath(path) {
  router.push(path)
}

// 向父组件 发送 图表参数
function emitChartParams(val) {
  emit('emitChartParams', val)
}
</script>
